<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="../static/css/font.css">
        <link rel="stylesheet" href="../static/css/xadmin.css">
        <script src="../static/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../static/js/xadmin.js"></script>
        <script type="text/javascript" src="../static/js/jquery.min.js"></script>
        <script type="text/javascript" src="../static/js/pagination.js"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="../static/js/pagination.css">
        <style>
            /*分页样式 start*/
            #pag_li_ {
                /*分页页码 <li> 的样式*/
                display: inline-block;
                min-width: 30px;
                height: 28px;
                cursor: pointer;
                color: black;
                line-height: 28px;
                background-color: white;
                border: 1px solid rgba(217, 217, 217, 1);
                text-align: center;
                margin: 0 4px;
                border-radius: 3px;
            }

            #pag_li_:hover {
                /*悬停样式*/
                background-color: #D1A85F;
                border-color: #D1A85F;
                color: #FFF
            }

            li.xl-disabled:hover {
                /*省略的页码按钮 ...按钮*/
                background-color: #f9f9f9 !important;
                border: 1px solid #dce0e0 !important;
                color: #666 !important;
            }

            li.xl-jumpText:hover {
                background-color: rgba(0, 0, 0, 0) !important;
                border-color: rgba(0, 0, 0, 0) !important;
            }

            #xlJumpNum {
                width: 50px;
                border-radius: 4px;
                border: 1px solid rgba(217, 217, 217, 1);
                height: 27px;
                text-align: center;
                outline: none;
            }

            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                -webkit-appearance: none !important;
            }

            input[type="number"] {
                -moz-appearance: textfield;
            }

            /*分页样式 end*/
        </style>
    </head>
    <body>
        <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
          </span>
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5" action="/exam/memberlist" method="post">
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input" th:value="${start}" autocomplete="off" placeholder="开始日" name="start" id="start">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input" th:value="${end}" autocomplete="off" placeholder="截止日" name="end" id="end">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" name="nickname" th:value="${nickname}" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn" onclick="ssa()" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-header">
                            <button class="layui-btn layui-btn-danger" onclick="DelSelect()"><i class="layui-icon"></i>批量删除</button>
                            <button class="layui-btn" onclick="xadmin.open('添加用户','/admin/member-add.html',600,400)"><i class="layui-icon"></i>添加</button>
                        </div>
                        <div class="layui-card-body layui-table-body layui-table-main">
                            <table class="layui-table layui-form">
                                <thead>
                                  <tr>
                                    <th>
                                      <input type="checkbox" lay-filter="checkall" name="" lay-skin="primary">
                                    </th>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>性别</th>
                                    <th>手机</th>
                                    <th>等级</th>
                                    <th>状态</th>
                                    <th>操作</th></tr>
                                </thead>
                                <tbody>
                                  <tr th:each="as:${li}">
                                    <td>
                                      <input type="checkbox" name="id[]" value="" id="id[]" th:value="${as.customerId}" lay-skin="primary">
                                    </td>
                                    <td th:text="${as.customerId}"></td>
                                    <td th:text="${as.nickname}"></td>
                                    <td th:text="${as.sex}"></td>
                                    <td th:text="${as.mobilePhone}"></td>
                                    <td th:text="${as.levelInvestors}"></td>
                                    <td class="td-status" >
                                        <!--<span th:if="${as.state==1}">-->
                                            <span th:text="${as.state=='1'?'已启用':'已停用'}" class="layui-btn layui-btn-normal layui-btn-mini"></span>
                                        <!--</span>-->
                                    </td>
                                    <td class="td-manage">
                                      <a th:title="${as.state!='1'?'启用':'停用'}" th:onclick="|member_stop(this,${as.customerId})|" href="javascript:;"  title="启用">
                                        <i th:text="${as.state!='1'?'&#xe601;':'&#xe62f;'}" class="layui-icon"></i>
                                      </a>
                                      <a title="编辑"  onclick="xadmin.open('编辑','/admin/member-edit.html',600,400)" href="javascript:;">
                                        <i class="layui-icon">&#xe642;</i>
                                      </a>
                                      <a th:onclick="|member_pass(${as.customerId})|" title="修改密码" href="javascript:;" data-target="#modelpass">
                                        <i class="layui-icon">&#xe631;</i>
                                      </a>
                                      <a title="删除" th:onclick="|member_del(${as.customerId})|" href="javascript:void (0);">
                                        <i class="layui-icon">&#xe640;</i>
                                      </a>
                                    </td>
                                  </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--<div class="layui-card-body ">
                            <div class="page">
                                <div>
                                  <a class="prev" href="/exam/memberlist/1">&lt;&lt;</a>
                                  <a class="num" href="">1</a>
                                  <span class="current">2</span>
                                  <a class="num" href="">3</a>
                                  <a class="num" href="">489</a>
                                  <a class="next" href="">&gt;&gt;</a>
                                </div>
                            </div>
                        </div>-->
                        <!--PC端分页容器-->
                        <div id="pageSea"></div>

                        <!--PC端分页容器-->
                        <div id="pageSea2"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        function ssa() {
            form.submit
        }

      layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        var  form = layui.form;


        // 监听全选
        form.on('checkbox(checkall)', function(data){

          if(data.elem.checked){
            $('tbody input').prop('checked',true);
          }else{
            $('tbody input').prop('checked',false);
          }
          form.render('checkbox');
        }); 
        
        //执行一个laydate实例
        laydate.render({
          elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
          elem: '#end' //指定元素
        });


      });

       /*用户-停用*/
      function member_stop(obj,id){
          layer.confirm('确认要停用吗？',function(){
              if($(obj).attr('title')=='启用'){
                  $.post(
                      "/exam/memberstatus",
                      {"id":id,"status":1},
                      function(data) {
                          if (0==data) {
                              layer.msg("已停用")
                              location.reload()
                          }
                      }
                  );
              }else{
                  $.post(
                      "/exam/memberstatus",
                      {"id":id,"status":2},
                      function(data) {
                          if (0==data) {
                              layer.msg("已启用")
                              location.reload()
                          }
                      }
                  );
              }
              
          });
      }
        function member_pass(id){
          alert(id)
            location.href="/exam/memberpass/"+id
        }
      /*用户-删除*/
      function member_del(id){

          layer.confirm('确认要删除吗？',function(){
              //发异步删除数据
              $.post(
                  "/exam/memberdel",
                  {"id":id},
                  function(data) {
                      if (true==data) {
                          layer.msg("删除成功")
                      }else {
                          layer.msg("删除失败")
                      }
                  }
              );
          });
      }
        function DelSelect() {
            var Checkbox = false;
            $("input[name='id[]']").each(function() {
                if (this.checked == true) {
                    Checkbox = true;
                }
            });
            if (Checkbox) {
                var t = confirm("您确认要删除选中的内容吗？");
                if (t == false) {
                    return false;
                } else {
                    var checkedID="";
                    $("input[name='id[]']").each(function() {
                        if (this.checked == true) {
                            checkedID += this.value + ",";

                        }
                    });
                    $.ajax({
                        url: "/exam/delAll",
                        type: "POST",
                        data: {
                            ids: checkedID
                        },
                        success: function (data) {
                            if (data == 0) {
                                layer.msg("删除成功");
                                window.location.reload();
                            } else {
                                layer.msg("删除失败");
                            }
                        }
                    });
                }
            } else {
                alert("请选择您要删除的内容!");
                return false;
            }
        }


        var Paging = (function () {
            function Paging(elementName, options) {
                this.elementName = elementName;
                this.options = options;
                options.nowPage = options.nowPage >= 1 ? options.nowPage : 1;
                options.pageNum = options.pageNum > 0 ? options.pageNum : 0;
                options.canJump = options.canJump || 0;
                options.showOne = options.showOne || 0;
                options.buttonNum = (options.buttonNum >= 5 ? options.buttonNum : 5) || 7;
                this.nowPage = options.nowPage > options.pageNum ? options.pageNum : options.nowPage;
                this.pageNum = options.pageNum < 0 ? 0 : options.pageNum;
                this.canJump = options.canJump;
                this.showOne = options.showOne;
                this.buttonNum = options.buttonNum;
                this.callback = options.callback;
                this.element = document.getElementById(elementName);
                this.init();
            }
            Paging.prototype.init = function () {
                this.createHtml();
            };
            Paging.prototype.createHtml = function () {
                var _this = this;
                var content = [];
                //如果pageNum小于等于0则不渲染
                if (this.pageNum <= 0) {
                    return '';
                }
                //如果只有一页并且设置为不显示，则不进行渲染
                if (!this.showOne && this.pageNum === 1) {
                    this.element.innerHTML = '';
                    return '';
                }
                content.push("<ul>");
                content.push("<li id='pag_li_' class='xl-prevPage'><</li>");
                //页面总数小于等于当前要展示页数总数，展示所有页面
                if (this.pageNum <= this.buttonNum) {
                    for (var i = 1; i <= this.pageNum; i++) {
                        if (this.nowPage !== i) {
                            content.push("<li id='pag_li_'>" + i + "</li>");
                        }
                        else {
                            content.push("<li id='pag_li_' class='xl-active' style='background-color: #D1A85F;border-color: #D1A85F;color: #FFF;'>" + i + "</li>");
                        }
                    }
                }
                else if (this.nowPage <= Math.floor(this.buttonNum / 2)) {
                    //当前页面小于等于展示页数总数的一半（向下取整），从1开始
                    for (var i = 1; i <= this.buttonNum - 2; i++) {
                        if (this.nowPage !== i) {
                            content.push("<li id='pag_li_'>" + i + "</li>");
                        }
                        else {
                            content.push("<li id='pag_li_' class='xl-active' style='background-color: #D1A85F;border-color: #D1A85F;color: #FFF;'>" + i + "</li>");
                        }
                    }
                    content.push("<li id='pag_li_' class='xl-disabled' style='opacity: .5;cursor: no-drop;'>...</li>");
                    content.push("<li id='pag_li_'>" + this.pageNum + "</li>");
                }
                else if (this.pageNum - this.nowPage <= Math.floor(this.buttonNum / 2)) {
                    //当前页面大于展示页数总数的一半（向下取整）
                    content.push("<li id='pag_li_'>" + 1 + "</li>");
                    content.push("<li id='pag_li_' class='xl-disabled' style='opacity: .5;cursor: no-drop;'>...</li>");
                    for (var i = this.pageNum - this.buttonNum + 3; i <= this.pageNum; i++) {
                        if (this.nowPage !== i) {
                            content.push("<li id='pag_li_'>" + i + "</li>");
                        }
                        else {
                            content.push("<li id='pag_li_' class='xl-active' style='background-color: #D1A85F;border-color: #D1A85F;color: #FFF;'>" + i + "</li>");
                        }
                    }
                }
                else {
                    //前半部分页码
                    if (this.nowPage - Math.floor(this.buttonNum / 2) <= 0) {
                        for (var i = 1; i <= Math.floor(this.buttonNum / 2); i++) {
                            if (this.nowPage !== i) {
                                content.push("<li id='pag_li_'>" + i + "</li>");
                            }
                            else {
                                content.push("<li id='pag_li_' class='xl-active' style='background-color: #D1A85F;border-color: #D1A85F;color: #FFF;'>" + i + "</li>");
                            }
                        }
                    }
                    else {
                        content.push("<li id='pag_li_'>" + 1 + "</li>");
                        content.push("<li id='pag_li_' class='xl-disabled' style='opacity: .5;cursor: no-drop;'>...</li>");
                        for (var i = this.nowPage - Math.floor(this.buttonNum / 2) + (this.buttonNum % 2 == 0 ? 3 : 2); i <= this.nowPage; i++) {
                            if (this.nowPage !== i) {
                                content.push("<li id='pag_li_'>" + i + "</li>");
                            }
                            else {
                                content.push("<li id='pag_li_' class='xl-active' style='background-color: #D1A85F;border-color: #D1A85F;color: #FFF;'>" + i + "</li>");
                            }
                        }
                    }
                    //后半部分页码
                    if (this.pageNum - this.nowPage <= 0) {
                        for (var i = this.nowPage + 1; i <= this.pageNum; i++) {
                            content.push("<li id='pag_li_'>" + i + "</li>");
                        }
                    }
                    else {
                        for (var i = this.nowPage + 1; i <= this.nowPage + Math.floor(this.buttonNum / 2) - 2; i++) {
                            content.push("<li id='pag_li_'>" + i + "</li>");
                        }
                        content.push("<li id='pag_li_' class='xl-disabled' style='opacity: .5;cursor: no-drop;'>...</li>");
                        content.push("<li id='pag_li_'>" + this.pageNum + "</li>");
                    }
                }
                content.push("<li id='pag_li_' class='xl-nextPage'>></li>");
                if (this.canJump) {
                    content.push("<li id='pag_li_' class='xl-jumpText xl-disabled' style='opacity: .5;cursor: no-drop;background-color: rgba(0, 0, 0, 0);border-color: rgba(0, 0, 0, 0);opacity: 1;'>共" + this.pageNum + "页<input type='number' id='xlJumpNum'>页</li>");
                    content.push("<li id='pag_li_' class='xl-jumpButton' style='padding: 0 5px;'>跳转</li>");
                }
                content.push("</ul>");
                this.element.innerHTML = content.join('');
                this.element.setAttribute('style', 'margin:20px auto;color:#666;text-align:center;');
                // DOM重新生成后每次调用是否禁用button
                setTimeout(function () {
                    _this.disabled();
                    _this.bindClickEvent();
                }, 20);
            };
            Paging.prototype.bindClickEvent = function () {
                var _this = this;
                var liList = this.element.children[0].children;
                var _loop_1 = function (i) {
                    liList[i].removeEventListener('click', function () {
                        _this.clickEvent(liList[i]);
                    });
                };
                for (var i = 0; i < liList.length; i++) {
                    _loop_1(i);
                }
                var _loop_2 = function (i) {
                    liList[i].addEventListener('click', function () {
                        _this.clickEvent(liList[i]);
                    });
                };
                for (var i = 0; i < liList.length; i++) {
                    _loop_2(i);
                }
            };
            Paging.prototype.clickEvent = function (li) {   //点击事件
                var cla = li.className;
                var num = parseInt(li.innerHTML);
                var nowPage = this.nowPage;
                if (li.className.indexOf('xl-disabled') !== -1 || cla === 'xl-jumpText') {
                    return '';
                }
                if (cla === 'xl-prevPage') { //点击上一页
                    if (nowPage >= 1) {
                        this.nowPage -= 1;
                    }
                }
                else if (cla === 'xl-nextPage') { //点击下一页
                    if (nowPage < this.pageNum) {
                        this.nowPage += 1;
                    }
                }
                else if (cla === 'xl-jumpButton') { //点击跳转按钮
                    var el = document.getElementById('xlJumpNum');//获取页码输入框的值
                    //没有输入正整数 或 大于总页数 或小于0
                    if (!(/(^[1-9]\d*$)/.test(Number(el.value))) || Number(el.value) > this.pageNum || Number(el.value) <= 0) {
                        alert('请输入合法的页码！');
                        el.value = ''; //清空页码输入框
                        return false;
                    } else {
                        this.nowPage = Number(el.value);
                    }
                } else {
                    this.nowPage = num;
                }
                this.createHtml();
                if (this.callback) {
                    this.callback(this.nowPage);    //回调
                }
            };
            Paging.prototype.disabled = function () {
                var nowPage = this.nowPage;
                var pageNum = this.pageNum;
                var liList = this.element.children[0].children;
                if (nowPage === 1) {
                    for (var i = 0; i < liList.length; i++) {
                        if (liList[i].className.indexOf('xl-prevPage') !== -1) {
                            liList[i].setAttribute('class', liList[i].getAttribute('class').concat(' xl-disabled'));
                        }
                    }
                }
                else if (nowPage === pageNum) {
                    for (var i = 0; i < liList.length; i++) {
                        if (liList[i].className.indexOf('xl-nextPage') !== -1) {
                            liList[i].setAttribute('class', liList[i].getAttribute('class').concat(' xl-disabled'));
                        }
                    }
                }
            };
            return Paging;
        }());



        new Paging('pageSea', {
            nowPage: 1,                 // 当前页
            pageNum: 12,                // 总页数
            buttonNum: 7,               // 要展示的页码数量
            canJump: 1,                 // 是否显示跳转功能跳转  0(默认):不显示    1:显示
            showOne: 0,                 // 只有一页时，是否显示  0:不显示     1(默认):显示
            callback: function (cpage) { //回调函数
                alert(cpage);
            }
        })
        new Paging('pageSea2', {
            nowPage: 1,                 // 当前页
            pageNum: 24,                // 总页数
            buttonNum: 7,               // 要展示的页码数量
            canJump: 0,                 // 是否显示跳转功能跳转  0(默认):不显示    1:显示
            showOne: 0,                 // 只有一页时，是否显示  0:不显示     1(默认):显示
            callback: function (cpage) { //回调函数
                alert(cpage);
            }
        })
    </script>
</html>